<template>
	<view class="record flex-grow-1">
		<view class="list" v-if="recordlist.length">
			<!-- <view class="con">
				<view class="con-item"  v-for="(item,id) in list" :key="id">
					<view class="cell flex-space-between">
						<view class="title">{{ item.class_hour_name }}</view>
						<view class="flex-align" >
							<view class="cel-info"
								style="float: right; width: auto;height: 42rpx;padding: 12rpx 0rpx 0rpx 0rpx; ">
								<image class="image_6"
									:src="item.coach_avatar" />
							</view>
							<image class="image_6"
								:src="item.coach_avatar" />
							<view class="instructor">
								{{ item.coach_name }}
							</view>
							<view class="cel-info"
								style="float: left; width: auto;height: 42rpx;">
								<view style="float: right;line-height: 42rpx;color: #000000;margin-right: 20rpx;">
									{{ item.coach_name }}
								</view>
							</view>
							<view class="cel-info flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b7fbc9a4edc3f956d845b31c625e6123ebab3127.png" />
								<text>50人</text>
							</view>
							<view class="cel-info flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ad2d276da70b70d5dd15a0c5ff08bab85aace623.png" />
								<text>10/20课</text>
							</view>
							<view class="cel-info flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9842024ac60f0acf7a820419c4afff0626406fbf.png" />
								<text>1000课次</text>
							</view>
						</view>
					</view>
					<view class="list" :animation="animationData[id]">
						<view class="list-con" :class="[`list-con-${id}`]">
							<view class="item flex-align " style=" justify-content:space-between" v-for="(items,index) in recordlist" :key="index">
								<view class="item-1"></view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 1">
									请假
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 2">
									评课
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 3">
									签到
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 4">
									签退
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 5">
									约课
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 6">
									调课
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 7">
									消课
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 8">
									结课
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 9">
									撤销请假
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 10">
									签到点名
								</view>
								<view class="address" style="color: #EB4751;" v-if="items.record_type  == 11">
									撤销
								</view>
								<view class="item-2">
									已核销：<text>50</text>
								</view>
								<view class="item-3">
									<text>{{items.add_time}}</text>
								</view>
							</view>
							<view class="item flex-align">
								<view class="item-1" style="font-weight: 550;">
									合计：共50学员，1000课次，已核销1000课次
								</view>
							</view>
						</view>
					</view>
					<view class="click flex-center" @click="handChange(item,id)">
						<view class="icon">
							<van-icon name="arrow-down" color="#8b85e6" size="31rpx" />
							<u-icon name="arrow-down" size="16" color="#8b85e6"></u-icon>
						</view>
					</view>
				</view>
			</view> -->
			<view class="item" v-for="item in recordlist" :key="item.id" v-if="item.record_type  == 1">
				<view class="flex-between">
					<view class="section">{{ item.class_hour_name }}</view>
					<view class="flex-align">
						<view class="instructor" v-if="item.record_type  !=6">{{ item.primary_time }} </view>
						<view class="instructor" v-else>{{ item.act_time }} </view>
					</view>
				</view>
				<view class="flex-between">
					<view class="address"  style="color: #EB4751;padding: 9rpx 22rpx;font-size: 22rpx;" v-if="item.record_type  == 1">请假</view>
					<view class="flex-align">
						<image class="image_6"
							:src="item.coach_avatar" />
						<view class="instructor">
							{{ item.coach_name }}
						</view>
					</view>
					<view class="flex-align">
						<view class="instructors" >{{item.content}}</view>
					</view>
				</view>
			<!-- record_type 记录类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课  -->
				<!-- <view class="date text-center" v-if="item.record_type  !=6">{{ item.primary_time }} </view>
				<view class="date text-center" v-else>{{ item.act_time }} </view>
				<view class="flex-align" >
					<u-icon name="map-fill" color="#3b68ee"></u-icon>
					<uni-icons type></uni-icons>
					<view class="address" style="color: #EB4751;" v-if="item.record_type  == 1">
						请假
					</view>
				</view> -->
			</view>
		</view>

		<!-- <u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" /> -->
	</view>
</template>
<!-- class_status: 课务状态 1已上课 2请假 3 未上课 -->
<!-- is_appointment: 是否约课 1 未约课 2 已约课 -->
<script>
	const index = require("@/api/personal/index.js");
	export default {
		// props: {
		// 	recordlist: Array,
		// },
		props: {
			recordlist: Array,
			train_enum_id: {
				//参数名
				type: String, //参数名
			},
			class_mode_id: {
				//参数名
				type: String, //参数名
			},
			train_item_id: {
				//参数名
				type: String, //参数名
			},
			goods_id: {
				//参数名
				type: String, //参数名
			},
			student_id: {
				//参数名
				type: String, //参数名
			},
			class_id: {
				//参数名
				type: String, //参数名
			},
		},
		data() {
			return {
				list: [{
						id: 1,
						section: '第三课时:呼吸练习',
						date: '2020/07/10 10:32:12',
						// address: '大连体育馆第一泳池',
						instructor: '李教练'
					},
					{
						id: 2,
						section: '第三课时:呼吸练习',
						date: '2020/07/10 10:32:12',
						// address: '大连体育馆第一泳池',
						instructor: '李教练'
					}
				],
				active: [],
				animationData: [],
				listQuery: { //分页
					pageSize: 10,
					page: 1,
				},
				recordlist:[],
				totalPage:''
			}
		},
		onLoad() {
			console.log(11)
			// this.records()
		},
		methods: {
			// handChange(item,index) {
			// 	console.log(item,index,'12132132')
			// 	this.records(item.id)
			// 	let animation = uni.createAnimation({
			// 		duration: 200,
			// 		timingFunction: 'linear'
			// 	})
			// 	//隐藏
			// 	if (this.active.includes(index)) {
			// 		animation.height(0).opacity(0).step()
			// 		this.animationData[index] = animation.export()
			// 		this.active = []
			// 	} else {
			// 		let query = uni.createSelectorQuery().in(this)
			// 		query.select(`.list-con-${index}`).boundingClientRect(data => {
			// 			let height = data.height
			// 			//关闭其他
			// 			if (this.active.length > 0) {
			// 				this.handChange(this.active[0])
			// 			}
			// 			this.active = [index]
			// 			animation.height(height).opacity(1).step()
			// 			this.animationData[index] = animation.export()
			// 		}).exec()
			// 	}
			// },
			// 课包-记录
			async records() {
				let that = this;
				if (this.listQuery.page === 1) that.recordlist = [];
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id:uni.getStorageSync('openid'),
					page:this.listQuery.page,
					pageSize:this.listQuery.pageSize,
					id:this.good_id
				}
				let res = await index.records(postData)
				if (res.code === 1) {
					// this.recordlist = res.data.list.data
					that.recordlist = that.recordlist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
					console.log(res,'2222')
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.page) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.records()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		background-color: #F3F3F3;
		padding: 20rpx 30rpx;

		.list {
			color: #333;
			
			.con {
				.con-item {
					margin-top: 30rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 4rpx;
			
					.cell {
						padding: 39rpx 9rpx 0rpx 31rpx;
			
						.title {
							color: #000;
							font-size: 30rpx;
							font-weight: 700;
						}
			
						.cel-info {
							color: rgb(51, 51, 51);
							font-size: 22rpx;
							font-weight: 500;
							// margin-right: 20rpx;
			
							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 9rpx;
							}
						}
					}
			
					.list {
						height: 0;
						overflow: hidden;
			
						.item {
							padding: 36rpx 31rpx 14rpx;
							border-bottom: dashed 6rpx rgb(239, 239, 239);
			
							&:last-of-type {
								border-bottom: 0;
							}
			
							.item-1 {
								color: rgb(51, 51, 51);
								font-size: 24rpx;
								font-weight: 500;
							}
			
							.item-2 {
								margin-left: 28%;
								color: rgb(51, 51, 51);
								font-size: 24rpx;
								font-weight: 500;
			
								text {
									color: rgb(250, 47, 76);
									font-size: 24rpx;
									font-weight: 700;
								}
							}
			
							.item-3 {
								// margin-left: 2%;
								color: rgb(51, 51, 51);
								font-size: 24rpx;
								font-weight: 500;
			
								text {
									color: rgb(250, 47, 76);
									font-size: 24rpx;
									font-weight: 700;
								}
							}
						}
					}
				}
			}

			.item {
				border-radius: 20rpx;
				background: #fff;
				padding: 20rpx 30rpx;
				
				.image_6 {
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
				}

				&+.item {
					margin-top: 20rpx;
				}
			}

			.section {
				background-color: rgba(85, 190, 243, 0.1);
				border-radius: 21rpx;
				padding: 9rpx 22rpx;
				font-size: 22rpx;
			}
			.section_s {
				border-radius: 21rpx;
				padding: 9rpx 22rpx;
				font-size: 22rpx;
			}

			.instructor {
				font-size: 24rpx;
				margin-left: 20rpx;
			}
			.instructors {
				font-size: 24rpx;
				margin-left: 20rpx;
				width: 160rpx; 
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			

			.date {
				margin: 60rpx 0 50rpx;
				font-size: 30rpx;
				font-family: DIN;
				line-height: 27rpx;
				font-weight: 700;
				color: #333333;
			}

			.address {
				font-size: 24rpx;
				// margin-left: 23rpx;
			}
		}
	}
</style>
